/*
 * 页面主视图
 * @Author: ljb
 * @Date: 2017-11-28 15:27:09
 * @Last Modified by: ljb
 * @Last Modified time: 2017-12-20 14:07:14
 * @Last Modified by: ljb
 * @Last Modified time: 2019-01-08 18:22:51
 */
<style lang="less" rel="stylesheet/less" type="text/less">
  @import '~src/assets/css/common.less';

  .v-app,.mirror-wx {
    width: 100%;
    height: 100%;
		background-color: #fff;
		position: relative;
	}

	.app-content{
		position: absolute;
		top: 0;
		width: 100%;
		min-height: 100%;
		background: #fff;
	}

	.slideOutRight{
		z-index: 9999;
        background-color: #fff;
	}

	.cube-popup {
		pointer-events: auto;
	}

	.mirror-wx.mode-pc {
		width: 640px;
		margin: 0 auto;
		overflow-x: hidden;
	}

</style>
<template>
  <div class="v-app">
    <div
      v-show="getDataInitStatus || directShowPage"
      v-cloak
      class="mirror-wx personal-scrollbar">
      <transition
        :mode="mode"
        :enter-active-class="enter_active_class"
        :leave-active-class="leave_active_class">
        <router-view class="app-content"/>
      </transition>

    </div>

    <lottieLading></lottieLading>
  </div>
</template>
<script>

import { domAddClass, setScreenHeight } from 'src/utils/utils'; // 公有方法
import { mapGetters } from 'vuex';
import API_LIST from './API_LIST';
import lottieLading from 'src/views/component/lottie-loading.vue';
// slower faster
const SLIDE_IN_RIGHT = 'animated faster slideInRight';
const SLIDE_OUT_RIGHT = 'animated faster slideOutRight';
const STAY = 'animated slow';
// const OUT_IN = 'out-in';
const IN_OUT = 'in-out';
// const SLIDE_IN_RIGHT = 'animated faster';

export default {
  components : {
    lottieLading,
  },
	data() {
		return {
			enter_active_class: null,
			leave_active_class: null,
			mode: null,
		};
	},
	computed: {
		...mapGetters('userInfo', [
			'getDataInitStatus',
		]),
		...mapGetters('lang', [
			'getLang',
		]),

		directShowPage() {
			const excludePage = [
				'login',
				'lucky-money',
				'lucky-money-rankings',
				'lucky-money-records',
				'manual',
				'ipad-manual',
				'mirror-manual',
				'lucky-money-zhifubao',
				'debug-example',
			];
			return excludePage.indexOf(this.$route.name) !== -1;
		},
	},
	watch: {
		$route(to, from) {
			if (this.hasEnterAnimation(to, from)) {
				// 设置进场动画
				this.setInterAnimation();
			} else if (this.hasLeaveAnimation(to, from)) {
				// 设置离场动画
				this.setLeaveAnimation();
			} else {
				this.resetAnimation();
			}
		},
	},
	created() {
		if (API_LIST.APP_DEBUG) {
			this.initVConsole();
		} else {
			/* global panxVConsole */
			panxVConsole({ left: '0px', bottom: '0px' });
		}
	},
	mounted() {

	},
	updated() {
		setScreenHeight('mirror-wx');
		if (this.$status.mode === 'pc') {
			domAddClass('.mirror-wx', 'mode-pc'); // 如果处于邮件访问跳转情况下，增加类名限制外层dom的宽度并居中
			this.resizeHtmlFont();
		}
	},
	methods: {
		/**
		 * 重新调整html根元素的font-size，保证页面布局
		 */
		resizeHtmlFont() {
			const html = document.querySelector('html');

			const container = document.querySelector('.mode-pc');

			if (html.style.fontSize !== `${container.offsetWidth / 10}px`) {
				html.style.fontSize = `${container.offsetWidth / 10}px`;
			}
		},

		/**
		 *  判断是否有离场动画
		 * @param {Object} to
		 * @param {Object} from
		 * @return {Boolean}
		 */
		hasLeaveAnimation(to, from) {
			// const route_group = from.matched[0];
			// || (route_group && route_group.meta && route_group.meta.has_transition);
			const { has_transition } = from.meta;
			const is_enter_home = to.name === 'home' && from.name !== 'home';
			const toDepth = to.path.split('/').length;
			const fromDepth = from.path.split('/').length;
			return has_transition && ((toDepth < fromDepth) || is_enter_home);
		},

		/**
		 *  判断是否有进场动画
		* @param {Object} to
		 * @param {Object} from
		 */
		hasEnterAnimation(to, from) {
			// const { routes } = this.$router.options;
			// const route_group = to.matched[0];
			const { has_transition } = to.meta;
			const is_leave_home = from.name === 'home' && to.name !== 'home';
			const toDepth = to.path.split('/').length;
			const fromDepth = from.path.split('/').length;
			return has_transition && ((toDepth >= fromDepth) || is_leave_home);
		},

		/**
		 *  重置动画
		 */
		resetAnimation() {
			this.mode = null;
			this.enter_active_class = null;
			this.leave_active_class = null;
		},


		/**
		 *  设置进场(前进)动画
		 */
		setInterAnimation() {
			this.mode = IN_OUT;
			this.enter_active_class = SLIDE_IN_RIGHT;
			this.leave_active_class = STAY;
		},

		/**
		 *  设置离场(后退)动画
		 */
		setLeaveAnimation() {
			this.mode = null;
			this.enter_active_class = STAY;
			this.leave_active_class = SLIDE_OUT_RIGHT;
		},

		/**
		 *  是否将进入 User 的子路由组
		 */
		isToUserRouteGroup(to) {
			const routeGroup = to.matched[0];
			return routeGroup.name === 'user';
		},

		/* global VConsole */
		/**
		 *  初始化 VConsole
		 */
		initVConsole() {
			return new VConsole();
		},

	},
};
</script>
